我們今天繼續看其他 Helper

getFileDownloadableLink

從後端取得檔案在 S3 的下載連結

downloadFile

首先先產生一個 名為「link」的 a 元素
並設定他的 href, download 和 target 的屬性
接著把它 append 到 document.body
然後呼叫 click() 的函式
進行下載
最後 revokeObjectURL 和移除 removeChild
完成下載檔案的動作

rgba

用於將十六進位色碼轉為 rgba
這個 helper 我曾經在工作中自己封裝成一個 helper 來進行使用

export const rgba = (hexCode: string, alpha: number) => {
  const hexColor = (hexCode || '#2d313a').replace('#', '')
  const r = parseInt(hexColor.slice(0, 2), 16)
  const g = parseInt(hexColor.slice(2, 4), 16)
  const b = parseInt(hexColor.slice(4, 6), 16)
  return `rgba(${r}, ${g}, ${b}, ${alpha})`
}

這個 helper 會傳入兩個參數

• hexhexCode
  十六進位色碼
• alpha
  想要設定的透明度

實作

首先先取得十六進位編碼本身
然後分別取出 r, g, b 的編碼，並轉成十進位
最後用模版語法 return rgba 的字串

另外也有 hexToHsl 的 helper 這邊不另外展開

handleError

在呼叫 API 時很常會用到的 handle error function

以寫入測驗為例

const handleFinish = () => {
    if (exerciseBeganAt.current && !exerciseFinishedAt.current) {
      exerciseFinishedAt.current = moment()
    }
    insertExercise({
      variables: {
        data: {
          member_id: currentMemberId,
          program_content_id: programContentId,
          answer: questions.map(question => ({
            questionId: question.id,
            questionPoints: question.points,
            choiceIds: question.choices.filter(choice => choice.isSelected).map(choice => choice.id),
            gainedPoints: question.gainedPoints || 0,
          })),
          exam_id: examId,
        },
      },
    })
      .then(() => setStatus('result'))
      .catch(error => handleError(error))
  }

當寫入測驗失敗時，會進入 .catch
這時候呼叫 handleError，並將 error 傳入

export const handleError = (error: any) => {
  process.env.NODE_ENV === 'development' && console.error(error)
  if (error.response && error.response.data) {
    return message.error(error.response.data.message)
  }
  return message.error(error.message)
}

傳入後，倘若環境是開發環境的話
會將 error 顯示在 瀏覽器的 console

如果傳入的 error 有包含 response 和 response.data
則會回傳一個 Ant Design 的 message (類似 toast 訊息)
並顯示 response.data.message 的訊息
如果沒有的話，則顯示 error.message

notEmpty

也是很常用的 helper，用來判斷式否為空

具體實作如下

export const notEmpty = <T>(value: T | null | undefined): value is T => {
  return value !== null && value !== undefined
}

型別使用泛型，可針對不同場景進行判斷

Helper 就講到這邊，這編列出了常用的幾個
明天來看看專案的 branch & PR